<template>
    <el-table
        :data="tableData"
        border
        :stripe='stripe'
        :tooltip-effect="tooltip"
        style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-table :data="props.row.children" border :tooltip-effect="tooltip">
                    <template v-for="(childData,cindex) in childrenColumn">
                        <el-table-column :key="cindex" :prop="childData.prop" :label="childData.label"> </el-table-column>
                    </template>
                </el-table>
            </template>
        </el-table-column>
        <template v-for="(item,index) in columns">  
            <el-table-column show-overflow-tooltip :fixed="item.fixed" :align="item.align" :key="index" :label="item.label" :prop="item.prop">
            </el-table-column>
        </template>
    </el-table>
</template>
<script>
  export default {
    props:{
        tableData:Array,
        columns:Array,
        childrenColumn:Array,
        stripe:true,
        tooltip:"dark",
    },
    data() {
        return {
            
        }
    },
    methods:{
        // handleExpendRow(row, expandedRows) { //这里是点击每一行会触发的方法
        //     if (!row.dicts) { //这里做了一个判断，首先判断这一行的数据对象有没有dicts这个属性，如果没说明没有数据我们需要请求后台，相当于懒加载
        //         this.queryDictData(row.id, row.labelType) //关键就是这个方法，row.id是父分组的id需要传给后台查询该子分组的信息
        //     }
        // },
        // queryDictData(id, labelType) {
        //     let self = this
        //     labelService.getLabels({ groupCode: labelType }).then(rspData => { //这里是我们项目里封装的ajax请求方法，相当于axios.post()
        //         console.log(rspData)
        //         const index = self.pageData.results.findIndex(data => data.id === id) //首先pageData.results绑定的是父表格的数据，那么我们要把子表格数据塞到对应的父分组，那我们要知道是哪一个分组，这里的findIndex就是通过id去查找对应的父分组在数据数组里的下标
        //         if (rspData.data && rspData.data.length) {
        //             rspData.data.forEach(item => { //这里我是给每个子分组信息里都加上父分组的id，以方便后面操作子表格每一行后，回调函数里刷新数据时需要用到，要知道他的父亲是谁，哈哈
        //                 item.labelId = id
        //             })
        //         }
        //         self.$set(self.pageData.results[index], 'dicts', rspData.data) //这里就是给父表格数据数组self.pageData.results第index个对象加上dicts这个属性，然后把rspData.data我们从后台拿到的数据绑定到dicts这个key里
        //     }) 
        // }
    }
  }
</script>
